<template>
        <el-col :span="24">
            <el-form-item>
                <el-button type="text" @click="isShow">添加成分信息</el-button>
                    <el-table
                    :data="value"
                    stripe
                    :header-cell-style= "{background:'#493d6f',color: '#fff',}"
                    style="width: 100%">
                    <!-- 成分名字
        数量	价格	厂商	类型	单位	产地	品牌	操作 -->
                    <el-table-column
                    prop="name"
                    label="成分名字"
                    align='center'
                    fixed
                    width="120">
                    </el-table-column>
                    <el-table-column
                    label="数量"
                    align='center'
                    width="120">
                        <template slot-scope="value">
                            <el-input size="mini" v-model="value.row.count" placeholder="请输入数量"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="price"
                    align='center'
                    label="价格"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    align='center'
                    label="厂商"
                    width="180">
                        <template slot-scope="value">
                            <el-input size="mini" v-model="value.row.supplier_name" placeholder="请输入厂家"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    align='center'
                    label="类型"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="unit"
                    align='center'
                    label="单位"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="place"
                    align='center'
                    label="产地"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="brand"
                    align='center'
                    label="品牌"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    fixed= "right"
                    align='center'
                    label="操作">
                        <template slot-scope="{row}">
                            <el-button
                            @click.native.prevent="deleteRow(row.detail_id)"
                            type="text"
                            size="small">
                            移除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <prod-list v-model="show" @cj="getCompositionList"/>
        </el-col>
        
</template>
<script>
import ProdList from './proList.vue'
    export default {
        components:{ProdList},
        props: {
            value: {
                required: true,
                type: Array
            }
        },
        data(){
            return {
                show: false,
            }
        },
        methods: {
            deleteRow(id) {
                console.log('1')
                this.$emit('input',this.value.filter(it => it.detail_id !== id))
            },
            isShow(){
                this.show = true
            },
            getCompositionList(val){
                this.$emit('input', val.map(it => ({
                    "detail_id": it.id,
                    "name": it.name,
                    "count": 0,
                    "price": it.price,
                    "supplier_name": '',
                    "type": it.type,
                    "unit": it.unit,
                    "level": it.level,
                    "place": it.place,
                    "brand": it.brand,
                    "remark": it.remark
                })))
            }
        },
        
    }
</script>